<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<text class="iconfont icon-back" @tap="goBack">←</text>
			<text class="title">我的照片</text>
		</view>

		<!-- 照片列表 -->
		<view class="photos-list" v-if="photos.length > 0">
			<view class="photo-item" v-for="(item, index) in photos" :key="index" @tap="previewPhoto(item.url)">
				<image :src="item.url" mode="aspectFill" class="photo-image"></image>
				<view class="photo-info">
					<text class="photo-date">{{ item.date }}</text>
					<text class="photo-tag">{{ item.tag }}</text>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<image src="/static/images/empty-photos.png" class="empty-image"></image>
			<text class="empty-text">您还没有照片</text>
			<button class="empty-btn" @tap="goToHome">去预约拍摄</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			photos: [
				{
					id: 1,
					url: 'https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
					date: '2023-10-15',
					tag: 'Cosplay'
				},
				{
					id: 2,
					url: 'https://images.unsplash.com/photo-1551854638-3c5e37b89952?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
					date: '2023-09-22',
					tag: '汉服'
				},
				{
					id: 3,
					url: 'https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
					date: '2023-08-30',
					tag: '毕业照'
				},
				{
					id: 4,
					url: 'https://images.unsplash.com/photo-1551854638-3c5e37b89952?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
					date: '2023-07-18',
					tag: '证件照'
				}
			]
		};
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		previewPhoto(url) {
			// 预览照片
			uni.previewImage({
				urls: this.photos.map(item => item.url),
				current: url
			});
		},
		
		goToHome() {
			// 跳转到首页
			uni.switchTab({
				url: '/pages/home/home'
			});
		}
	}
};
</script>

<style>
.container {
	padding: 0;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.nav-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
	position: relative;
}

.icon-back {
	font-size: 40rpx;
	color: #333;
}

.title {
	font-size: 32rpx;
	font-weight: 500;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.photos-list {
	padding: 20rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.photo-item {
	width: 48%;
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.photo-image {
	width: 100%;
	height: 300rpx;
}

.photo-info {
	padding: 16rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.photo-date {
	font-size: 24rpx;
	color: #666;
}

.photo-tag {
	font-size: 24rpx;
	color: #8B5CF6;
	background-color: #F3F4F6;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #6B7280;
	margin-bottom: 30rpx;
}

.empty-btn {
	background-color: #8B5CF6;
	color: #fff;
	font-size: 28rpx;
	padding: 15rpx 40rpx;
	border-radius: 40rpx;
}
</style>